<template>
  <div>
    <el-table :data="content" style="width: 100%">
      <el-table-column prop="title" label="标题" width="80"> </el-table-column>
      <el-table-column prop="username" label="作者" width="80">
      </el-table-column>
      <el-table-column prop="ccity" label="城市"> </el-table-column>
      <el-table-column prop="category" label="分类"> </el-table-column>
      <el-table-column prop="introduction" label="简介"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img
            :src="scope.row.picture"
            width="120"
            height="120"
            class="head_pic"
            :preview-src-list="[scope.row.picture]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="des" label="描述"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteContent(scope.row.title)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="
              huoqushuju(
                scope.row.id,
                scope.row.title,
                scope.row.category,
                scope.row.introduction,
                scope.row.picture,
                scope.row.des
              )
            "
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改信息弹框 -->
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.introduction"></el-input>
        </el-form-item>
        <el-form-item label="图片)">
          <img :src="form.picture" alt="" width="200" />
          <el-upload
            v-model="form.picture"
            action=""
            :on-change="getFileAnswer"
            :limit="1"
            list-type="picture"
            :auto-upload="false"
          >
            <el-button size="small" type="primary"
              >选择图片上传，最多上传一张图片</el-button
            >
          </el-upload>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.sortid" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.category"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.des"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateContent()">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "querycontent",
  data() {
    return {
      options: [],
      form: {
        id: "",
        title: "",
        introduction: "",
        ccity: "",
        sortid: "",
        picture: "",
        des: "",
      },
      content: [],
      dialogVisible: false,
    };
  },
  created() {
    this.getClassfiy();
    this.getContent();
  },
  methods: {
    getContent() {
      let url = "/contentController/getContent";
      let param = "";
      this.$axios
        .get(url, param)
        .then((resp) => {
          this.content = resp.data;
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
    deleteContent(title) {
      let url = "/contentController/deleteContent";
      let content = {
        title: title,
      };
      let param = this.$qs.stringify(content);
      this.$confirm("此操作将永久删除" + title + "内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(url, param)
            .then((resp) => {
              if (resp.data) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getContent();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            })
            .catch((err) => {
              console.log("error=", err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取分类列表
    getClassfiy() {
      let url = "/contentController/getClassfiy";
      let param = "";
      this.$axios
        .get(url, param)
        .then((resp) => {
          this.options = resp.data;
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
    huoqushuju(id,title, category, introduction, picture, des) {
      this.dialogVisible = true;
      this.form.id = id;
      this.form.title = title;
      this.form.category = category;
      this.form.introduction = introduction;
      this.form.picture = picture;
      this.form.des = des;
    },
    updateContent() {
      this.dialogVisible = false;
      let url = "/contentController/updateContent";
      let param = this.$qs.stringify(this.form);
      this.$axios
        .post(url, param)
        .then((resp) => {
          let i = resp.data;
          if (i) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.getContent();
          } else {
            this.$message({
              type: "error",
              message: "修改失败，请处理!",
            });
          }
        })
        .catch((err) => {
          console.log("error=", err);
        });
    },
      getFileAnswer(file) {
      this.getBase64(file.raw).then((res) => {
        console.log(res);
        this.form.picture = res;
      });
    },
    //图片转为base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
        //开始转
        reader.onload = function () {
          fileResult = reader.result;
        };
        //转 失败
        reader.onerror = function (error) {
          reject(error);
        };
        //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult);
        };
      });
    },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
};
</script>
<style scoped>
</style>